<template>
  <div>
    <indexheade></indexheade>
    <el-button type="primary" @click="openRole">添加角色</el-button>
    <div class="w">
      <el-table
      border
      :data="rolessList"
      style="width: 100%">
            <!-- 展开列 -->
           <el-table-column type="expand" label="#">
              <template slot-scope="scope">
                <el-row :class="['bar',i1===0 ? 'bar-top':'','vcenter']" v-for="( item1, i1) in scope.row.children" :key="item1.id">
                    <!-- 渲染一级权限 -->
                    <el-col :span="5" >
                      <el-tag >{{item1.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 渲染二级和三级权限 -->
                    <el-col :span="19">
                        <el-row class="b vcenter" v-for=" item2 in item1.children" :key="item2.id">
                            <el-col :span="6">
                                <el-tag  type="success">{{item2.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="18">
                                    <el-tag closable 
                                      v-for="item3 in item2.children" 
                                      :key="item3.id" 
                                      @close="removeRolesById(scope.row,item3.id)" 
                                      type="warning">
                                      {{item3.authName}}
                                  </el-tag>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
              </template>
           </el-table-column>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column
            label="角色名称"
            prop="roleName">
          </el-table-column>
          <el-table-column
            label="角色描述"
            prop="roleDesc">
          </el-table-column>
          <el-table-column
            label="操作"
            prop="id"
            width="350">
              <template slot-scope="scope">
                <el-button type="primary" @click="openUpadteRole(scope.row)" icon="el-icon-edit" size="mini" >编辑</el-button>
                <el-button type="danger" @click="deleteRoles(scope.row.id)" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button type="warning" @click="AssigningRoleRights(scope.row)" icon="el-icon-s-help" size="mini">分配权限</el-button>
              </template>
          </el-table-column>
      </el-table>
     
    </div>
    <!-- 添加角色 -->
    <addRole
      :dialogVisible="dialogVisible"
      :offUser="offRole" 
      :getRolessList="getRolessList"/>
      <!-- 修改角色 -->
      <updateRole
      :updateDialogVisible="updateDialogVisible"
      :offUser="offRole"
      :role="role"
      :getRolessList="getRolessList"
      />
      <rolePrivileges
      :dialogVisible="roleDialogVisible"
      :rolePrivileges="rolePrivileges"
      :offf="offRole"
      />
  </div>
</template>

<script>
import indexheade from "../components/indexheade.vue";
import addRole from '../components/power/addRole.vue';
import updateRole from '../components/power/updateRole.vue';
import rolePrivileges from '../components/power/rolePrivileges.vue';
export default {
name:'roles',
data() {
  return {
    rolessList: [],
    //添加用户框打开和关闭
    dialogVisible: false,
    //修改用户框打开和关闭
    updateDialogVisible: false,
    //分配角色框打开和关闭
    roleDialogVisible: false,
    //单行角色数据
    role:{},
    //角色权限数据
    rolePrivileges:{},
  };
},
created(){
  // 发送请求
  this.getRolessList()
},
components:{
  indexheade,
  addRole,
  updateRole,
  rolePrivileges
},
methods:{
  //发送网络请求获取权限列表
  getRolessList(){
    this.$http.get('roles').then(
    respose => {//正确请求时执行的代码
      // console.log(respose.data.data);
      this.rolessList = respose.data.data
    },error => {},)
  },
  //删除权限
  removeRolesById(role,rightId){
    this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(role,"和",rightId);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$http.delete(`roles/${role.id}/rights/${rightId}`).then(
            respose => {//正确请求时执行的代码
              // console.log(respose.data);
              if (respose.data.meta.status!=200){
                  this.$message({
                  type: 'info',
                  message: '取消权限失败'
                });
              }
              else{
                    // 更新当前角色列表
                role.children = respose.data.data
              } 
          },error => {},)
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
  },
  //删除角色
  deleteRoles(roleId){
    this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(role,"和",rightId);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$http.delete(`roles/${roleId}`).then(
            respose => {//正确请求时执行的代码
              // console.log(respose.data);
              if (respose.data.meta.status!=200){
                  this.$message({
                  type: 'info',
                  message: '取消角色失败'
                });
              }
              else{
                    // 更新当前角色列表
                // 发送请求
                this.getRolessList()
              } 
          },error => {},)
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
  },
  // 打开添加角色框
  openRole(){
    this.dialogVisible = true
  },
   //打开编辑角色框
   openUpadteRole(row){
    this.updateDialogVisible = true
    console.log(row)
    this.role = row
  },
  // 打开分配角色权限框
  AssigningRoleRights(row){
    this.roleDialogVisible = true
    this.rolePrivileges = row
  },
  //关闭添加用户框和修改用户框和分配角色框
  offRole(){
    this.dialogVisible = false
    this.updateDialogVisible = false
    this.roleDialogVisible = false
    console.log("函数被调用了");
  },
 
},
}
</script>

<style scoped>
.el-button{
  margin-bottom: 15px;
}
.el-tag{
  margin: 7px;
}
.bar{
  border-bottom:1px solid #eee;
  margin-left: 50px;
}
.bar-top{
  border-top:1px solid #eee;
}
.b{
  border-bottom:1px solid #eee;
}
.vcenter{
  display: flex;
  align-items: center;
}
</style>